<template>
  <div class="container">
    <el-card class="search-container">
      <el-form
        ref="queryForm"
        label-width="100px"
        class="queryForm"
        :model="queryForm"
        :inline="true"
      >
        <el-form-item label="时间" required prop="time">
          <el-form-item>
            <el-date-picker
              type="daterange"
              v-model="queryForm.time"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="yyyy-MM-DD"
              style="width: 100%"
            >
              <!--  HH:mm:ss -->
            </el-date-picker>
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchClick">搜索</el-button>
          <el-button @click="resetClick('queryForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="line-container">
      <div class="chart-container">
        <LineChart
          class="line-chart"
          v-for="item in dataList"
          :key="item.id"
          :xAxis="item.xAxis"
          :series="item.series"
          :title="item.title"
          :total="item.total"
        />
      </div>
      <el-pagination
        background
        :page-size="queryForm.pageSize"
        layout="prev, pager, next, total"
        :total="total"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import LineChart from "./LineChart.vue";
import { getList } from "@/api/ywjy/chart.js";
export default {
  name: "Chart",
  components: {
    LineChart
  },
  data() {
    return {
      queryForm: {
        time: [],
        pageSize: 4,
        pageNum: 1
      },
      dataList: [
        {
          id: 1,
          xAxis: {
            data: []
          },
          series: {
            data: []
          },
          title: "课文总点击数：",
          total: 2
        },
        {
          id: 2,
          xAxis: {
            data: []
          },
          series: {
            data: []
          },
          title: "点击开始朗读次数：",
          total: 0
        },
        {
          id: 3,
          xAxis: {
            data: []
          },
          series: {
            data: []
          },
          title: "名嘴示范收听数：",
          total: 0
        },
        {
          id: 4,
          xAxis: {
            data: []
          },
          series: {
            data: []
          },
          title: "生成结果次数：",
          total: 0
        },
        {
          id: 5,
          xAxis: {
            data: []
          },
          series: {
            data: []
          },
          title: "作品推荐收听次数:",
          total: 0
        },
        {
          id: 6,
          xAxis: {
            data: []
          },
          series: {
            data: []
          },
          title: "名嘴示范收听次数：",
          total: 0
        },
        {
          id: 7,
          xAxis: {
            data: []
          },
          series: {
            data: []
          },
          title: "上传作品次数：",
          total: 0
        },
        {
          id: 8,
          xAxis: {
            data: []
          },
          series: {
            data: []
          },
          title: "H5分享次数：",
          total: 0
        },
        {
          id: 9,
          xAxis: {
            data: []
          },
          series: {
            data: []
          },
          title: "海报分享次数：",
          total: 0
        },
        {
          id: 10,
          xAxis: {
            data: []
          },
          series: {
            data: []
          },
          title: "总阅读作品数:",
          total: 0
        }
      ],
      total: 0
    };
  },

  mounted() {
    this.getList();
  },

  methods: {
    getList() {
      const [startTime, endTime] = this.queryForm.time;
      this.dataList.map(newItem => {
        newItem.xAxis.data = [];
        newItem.series.data = [];
      });

      getList({
        startTime,
        endTime,
        type: "1",
        pageSize: this.queryForm.pageSize,
        pageNum: this.queryForm.pageNum
      }).then(res => {
        console.log(res);
        this.fmtData(res.data.dailyStatisticsList);
      });

      for (let index = 1; index <= 9; index++) {
        getList({
          startTime,
          endTime,
          type: index,
          pageSize: this.queryForm.pageSize,
          pageNum: this.queryForm.pageNum
        }).then(res => {
          if (res.data.total) {
            this.dataList[index].total = res.data.total;
          } else {
            this.dataList[index].total = 0;
          }
        });
      }
    },

    fmtData(data) {
      data.map(item => {
        this.dataList.map(newItem => newItem.xAxis.data.push(item.datetimeStr));
        this.dataList[0].series.data.push(item.textChack);
        this.dataList[1].series.data.push(item.readChack);
        this.dataList[2].series.data.push(item.teacherChack);
        this.dataList[3].series.data.push(item.reultChack);
        this.dataList[4].series.data.push(item.recommendChack);
        this.dataList[5].series.data.push(item.teacherListChack);
        this.dataList[6].series.data.push(item.pushChack);
        this.dataList[7].series.data.push(item.shareChack);
        this.dataList[8].series.data.push(item.posterChack);
        this.dataList[9].series.data.push(item.totalReading);
      });
    },

    handleCurrentChange(val) {
      this.queryForm.pageNum = val;
      this.getList();
    },
    searchClick() {
      this.getList();
    },
    resetClick(formName) {
      this.$refs[formName].resetFields();
      this.queryForm.pageNum = 1;
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 16px;
  .line-container {
    margin-top: 12px;
    width: 100%;
    ::v-deep .el-card__body {
      .chart-container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        text-decoration: none;
        .line-chart {
          margin-bottom: 20px;
          width: 49%;
          height: 400px;
        }
      }
      .el-pagination {
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>
